<template>
  <div>
    <Card shadow>
      <Form ref="submitForm" :model="formData" label-position="top">
        <FormItem label="模块" prop="module">
          <Select v-model="formData.module" style="width: 180px;" @on-change="changeModule">
            <Option v-for="item in moduleList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </FormItem>
        <FormItem label="字段信息" prop="checkBox">
          <template>
            <div style="border-bottom: 1px solid #e9e9e9;padding-bottom:6px;margin-bottom:6px;">
              <Checkbox :indeterminate="indeterminate" :value="checkAll" @click.prevent.native="handleCheckAll">全选
              </Checkbox>
            </div>
            <CheckboxGroup v-model="formData.checkBox" @on-change="checkAllGroupChange">
              <Checkbox v-for="(item, index) in checkBoxList" :key="index" :label="item.id">{{ item.name }}</Checkbox>
            </CheckboxGroup>
          </template>
        </FormItem>
        <FormItem label="筛选条件">
          <div v-for="(item, index) in filterArr" :key="index" style="display: flex;margin-top: 15px;">
            <div style="width: 180px;">
              <Select v-model="formData.isFilterArr[index].one" @on-change="changeSelects(index)">
                <Option v-for="(item1, index1) in filterArr[index].oneList" :value="item1.id" :key="item1.value">
                  {{ item1.name }}
                </Option>
              </Select>
            </div>
            <div style="width: 180px;margin-left: 15px;">
              <Select v-model="formData.isFilterArr[index].two">
                <Option v-for="item in filterArr[index].twoList" :value="item.id" :key="item.value">{{ item.name }}
                </Option>
              </Select>
            </div>
            <div style="width: 220px;margin-left: 15px;">
              <!-- 为一级下拉框 -->
              <Select v-if="formData.isFilterArr[index].select_input === 1" v-model="formData.isFilterArr[index].three"
                :filterable="filterable" clearable remote :remote-method="remoteMethod1" :loading="loading1">
                <Option v-for="item in filterArr[index].threeList" :value="item.id" :key="item.value">{{ item.name }}
                </Option>
              </Select>
              <!-- 为输入框 -->
              <Input v-if="formData.isFilterArr[index].select_input === 2"
                v-model="formData.isFilterArr[index].three"></Input>
              <!-- 为二级下拉框 -->
              <Select v-if="formData.isFilterArr[index].select_input === 4" v-model="formData.isFilterArr[index].three">
                <Option-group :label="item.name" v-for="item in filterArr[index].threeList" :key="item.id">
                  <Option v-for="items in item.children" :value="items.id" :key="items.id">{{ items.name }}</Option>
                </Option-group>
              </Select>
              <!-- 为时间选择器 -->
              <DatePicker :options="options" v-model="formData.isFilterArr[index].three"
                v-if="formData.isFilterArr[index].select_input === 3" type="daterange" placement="bottom-end"
                placeholder="请选择日期"></DatePicker>
            </div>
            <div style="width: 180px;margin-left: 10px;">
              <Button type="default" @click="delatefilterArr(index)">删除</Button>
            </div>
          </div>
          <div style="margin-top: 20px;">
            <Button :disabled="!lastComplete" type="dashed" @click="addfilterArr">+ 新增</Button>
          </div>
        </FormItem>
        <FormItem>
          <Button type="primary" @click="submit">开始导出</Button>
        </FormItem>
      </Form>
    </Card>
    <Modal :mask-closable="false" :footer-hide="true" v-model="modal1" title="数据导出" @on-cancel="cancel">
      <p>
        数据正在导出，
        <span style="font-size:16px;color: #f90;">{{ time }}</span>
        秒后页面将跳转至数据导出日志页面
      </p>
    </Modal>
  </div>
</template>

<script>
  import dayjs from "dayjs"
  import {
    exportInfoList,
    exportSelectList,
    exportData,
    exportSearchCity
  } from "../../../api/setting.js";
  export default {
    data() {
      return {
        options: {
          disabledDate(date) {
            return date && date.valueOf() > Date.now();
          }
        },
        modal1: false,
        timer: null,
        loading1: false,
        //是否select支持搜索
        filterable: false,
        timer: null,
        time: 10,
        //检验数据
        formData: {
          //初始化给1,因为需要这个去拿其他的筛选项
          module: 1,
          checkBox: [],
          //select的数据,后面会根据index添加或者减少
          isFilterArr: [
            {
              //第一,二,三个select
              one: "",
              two: "",
              three: "",
              //在未选择第一个的时候禁止第三个selectg下拉
              select_input: 2,
            },
          ],
        },
        //渲染select数据
        filterArr: [
          {
            oneList: [],
            twoList: [],
            threeList: [],
          },
        ],
        //自定义的中间select的数据
        compareList: [
          {
            id: "=",
            name: "等于",
          },
          {
            id: "!=",
            name: "不等于",
          },
        ],
        compareList1: [
          {
            id: "=",
            name: "等于",
          },
          {
            id: "!=",
            name: "不等于",
          },
          {
            id: ">=",
            name: "大于等于",
          },
          {
            id: "<=",
            name: "小于等于",
          },
        ],
        indeterminate: false,
        //
        checkBoxList: [],
        isOneList: [],
        checkAll: false,
        moduleList: [
          {
            value: 1,
            label: "患者",
          },
          {
            value: 2,
            label: "导医",
          },
          {
            value: 3,
            label: "消费",
          },
          {
            value: 4,
            label: "治疗",
          },
          {
            value: 5,
            label: "回访",
          },
        ],
      };
    },
    computed: {
      lastComplete() {
        if (this.formData.isFilterArr.length >= 1) {
          let last = this.formData.isFilterArr[
            this.formData.isFilterArr.length - 1
          ];
          if (last.one !== "" && last.two !== "" && last.three !== "") {
            return true;
          } else {
            return false;
          }
        } else {
          return true;
        }
      },
    },
    created() {
      this._exportInfoList({
        mudle_id: this.formData.module,
      });
    },
    mounted() { },
    methods: {
      cancel() {
        this.modal1 = false;
        this.timer && clearInterval(this.timer);
        this.time = 10;
      },
      remoteMethod1(value) {

      },
      searchCity(params, index) {
        exportSearchCity(params).then(res => {
          console.log(res)
          this.$set(this.filterArr[index], 'threeList', res.list)
          console.log(this.filterArr)
        })
      },
      changeModule(value) {
        this.indeterminate = false
        this.formData.checkBox = [];
        this.formData.isFilterArr = [{
          //第一,二,三个select
          one: "",
          two: "",
          three: "",
          //在未选择第一个的时候禁止第三个selectg下拉
          select_input: 2,
        },]
        this.filterArr = [{
          oneList: [],
          twoList: [],
          threeList: [],
        }]
        this.isOneList = []
        this._exportInfoList({
          mudle_id: value,
        });
      },
      submit() {
        let params = this.formData;
        if (!params.module) {
          this.$Message.warning("请完善模块选项");
          return false;
        }
        if (!params.checkBox || params.checkBox.length == 0) {
          this.$Message.warning("请选择字段信息");
          return false;
        }
        let condition = params.isFilterArr.map((vv) => {
          if (vv.one !== "" && vv.two !== "" && vv.three !== "") {
            if (vv.three instanceof Array) {
              return {
                id: vv.one,
                operator: vv.two,
                start_time: dayjs(vv.three[0]).format('YYYY-MM-DD'),
                end_time: dayjs(vv.three[1]).format('YYYY-MM-DD')
              };
            } else {
              return {
                id: vv.one,
                operator: vv.two,
                value: vv.three,
              };
            }

          }
        }).filter(e => e)
        let requeseparams = {
          mudle_id: JSON.stringify(params.module),
          select: JSON.stringify(params.checkBox),
          condition: JSON.stringify(condition),
        };
        exportData(requeseparams).then((res) => {
          this.modal1 = true;
          this.timer = setInterval(() => {
            this.time = this.time - 1;
            if (this.time <= 0) {
              clearInterval(this.timer);
              this.modal1 = false;
              this.time = 10;
              this.$router.push("/setting/managementData/exportLog");
            }
          }, 1000);
        });
      },
      //点击删除某一个select筛选
      delatefilterArr(index) {
        this.filterArr.splice(index, 1);
        this.formData.isFilterArr.splice(index, 1);
      },
      //点击新增,网filterArr数组增加一个数据,用来多渲染一条赛选规则
      addfilterArr() {
        this.filterArr.push({
          oneList: this.isOneList,
          twoList: this.compareList,
          threeList: [],
        });
        this.formData.isFilterArr.push({
          one: "",
          two: "",
          three: "",
          select_input: 2,
        });
      },
      changeSelects(index) {
        this.formData.isFilterArr[index].three = "";
        let choose_id = this.formData.isFilterArr[index].one;
        let isWho = this.isOneList.filter((e) => e.id == choose_id)[0];
        this.filterable = false
        if (isWho) {
          this.formData.isFilterArr[index].select_input = isWho.is_choose;
          this.$set(this.filterArr[index], "twoList", this.compareList);
          if (isWho.is_choose === 1) {
            //判断是否存在是因为当点击删除的时候触发了这个函数,choose_id是不存在的,阻止发送请求
            if (choose_id) {
              //选择患者标签的时候二级下拉，不能选择一级
              if (isWho.name === "患者标签") {
                this.formData.isFilterArr[index].select_input = 4;
              }
              if (isWho.name === "地区") {
                this.filterable = true
              }
              let params = { choose_id };
              exportSelectList(params).then((res) => {
                this.$set(this.filterArr[index], "threeList", res);
              });
            }
          } else if (isWho.is_choose === 2) {
            //选择年龄的时候，第二个选项多了大于等于，和小于等于选项
            if (isWho.name == "年龄") {
              this.$set(this.filterArr[index], "twoList", this.compareList1);
            }
          }
        }
      },
      //初始化请求数据,以及赋值
      _exportInfoList(params) {
        exportInfoList(params).then((res) => {
          console.log(res);
          this.checkBoxList = res.field_list;
          this.isOneList = res.select_field_list;
          this.filterArr[0].oneList = res.select_field_list;
          this.filterArr[0].twoList = this.compareList;
        });
      },
      //全选
      handleCheckAll() {
        if (this.indeterminate) {
          this.checkAll = false;
        } else {
          this.checkAll = !this.checkAll;
        }
        this.indeterminate = false;
        if (this.checkAll) {
          this.formData.checkBox = this.checkBoxList.map((v) => v.id);
        } else {
          this.formData.checkBox = [];
        }
      },
      //单选
      checkAllGroupChange(data) {
        if (data.length === this.checkBoxList.length) {
          this.indeterminate = false;
          this.checkAll = true;
        } else if (data.length > 0) {
          this.indeterminate = true;
          this.checkAll = false;
        } else {
          this.indeterminate = false;
          this.checkAll = false;
        }
      },
    },
  };
</script>

<style scoped></style>